<template>
	<div class="y-content">
		
		
		<div class="Ybgcolorbox">
			<div class="Ybgcolor-item" :class="classes">
				<div>{{names}}</div>
				<input class="inputs" v-model="CCC" />
			</div>
		</div>
		
		
	</div>
</template>

<script>
export default {
	name: 'YNavBar',
	props:{
		names:{
			type:String,
			default:"浅粉红"
		},
		classes:{
			type:String,
			default:"bg-LightPink"
		}
	},
	data(){
		return{
			CCC:this.classes
		}
	}
};
</script>

<style lang="less" scoped>
.y-content {
	padding: 2px;
	.Ybgcolorbox{
		display: flex;
		flex-wrap: wrap;
		.Ybgcolor-item{
			font-size: 14px;
			height: 80px;
			width: 130px;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.inputs{
				margin-top: 6px;
				text-align: center;
				width: 80%;
				border: none;
				background-color: inherit;
			}
		}
	}
}
</style>
